<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</meta>
<title>F().slides</title>
<link type="text/css" rel="stylesheet" href="../css/admin.css" />
<link type="text/css" rel="stylesheet" href="../css/item_show.css" />
<script type="text/javascript" src="../../1st.js"></script>
<script type="text/javascript" src="../../1st.highlight.js"></script>
</head>
<body id="split">
<div id="content">
	<div rel="F.param">
		<h2><span>返回值:</span>F().slides</h2>
					<h3>概述 : 幻灯片组件</h3>
						
			<div class="desc">
				<div class="longdesc"><pre>DOM链式方法：F().slides(ops);

参数类型为string时：有 fade、shutter、scrollLeft、scrollTop四种动画效果，暂时只适用于panel
参数类型为function时：为某对象自定义动画效果

如果为某一个对象(tab/panel/title之一)定义动画效果，则会覆盖对象默认的切换效果</pre></div>
			</div>
							<h3>语法1：F.slides(obj,[ops])</h3>
						<table class="args">
				<!--caption>参数列表：(2)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>obj</strong></td><td>ID,Node,fdom</td><td>容器</td></tr>
									<tr><td><strong>ops</strong></td><td>Object</td><td>参数配置</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td></td><td></td></tr>
			</table>
					<h3>语法2：ops参数</h3>
						<table class="args">
				<!--caption>参数列表：(12)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>etype</strong></td><td>String</td><td>事件名称，主要有click和mouseover,默认为click</td></tr>
									<tr><td><strong>index</strong></td><td>Number</td><td>初始项,默认为0</td></tr>
									<tr><td><strong>loop</strong></td><td>Number</td><td>循环方式，0不循环，1直接循环(默认)，2无缝循环</td></tr>
									<tr><td><strong>autoplay</strong></td><td>Number</td><td>自动播放频率，1表示不延时连播</td></tr>
									<tr><td><strong>increment</strong></td><td>Number</td><td>每次滚动增量</td></tr>
									<tr><td><strong>duration</strong></td><td>Number</td><td>动画持续时间，默认为500毫秒</td></tr>
									<tr><td><strong>init</strong></td><td>Function</td><td>初始化事件</td></tr>
									<tr><td><strong>tab</strong></td><td>Function</td><td>tab动画效果</td></tr>
									<tr><td><strong>panel</strong></td><td>String,Function</td><td>panel动画效果，具体见说明</td></tr>
									<tr><td><strong>title</strong></td><td>Function</td><td>title动画效果</td></tr>
									<tr><td><strong>onchange</strong></td><td>Function</td><td>动画开始切换时的回调函数</td></tr>
									<tr><td><strong>aniAfter</strong></td><td>Function</td><td>动画完成时的回调函数</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td></td><td></td></tr>
			</table>
					<h3>语法3：实例属性</h3>
						<table class="args">
				<!--caption>参数列表：(9)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>oldIndex</strong></td><td>Number</td><td>当前索引</td></tr>
									<tr><td><strong>nowIndex</strong></td><td>Number</td><td>上一个索引</td></tr>
									<tr><td><strong>ispause</strong></td><td>Number</td><td>是否暂停,0否1是</td></tr>
									<tr><td><strong>tab</strong></td><td>fdoms</td><td>导航标签</td></tr>
									<tr><td><strong>panel</strong></td><td>fdoms,fdom</td><td>展示面板</td></tr>
									<tr><td><strong>title</strong></td><td>fdoms</td><td>提示说明</td></tr>
									<tr><td><strong>prev</strong></td><td>fdom</td><td>上一个</td></tr>
									<tr><td><strong>next</strong></td><td>fdom</td><td>下一个</td></tr>
									<tr><td><strong>wrap</strong></td><td>fdom</td><td>滚动外层对象</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td></td><td></td></tr>
			</table>
					<h3>语法4：实例方法</h3>
						<table class="args">
				<!--caption>参数列表：(5)</caption-->
				<tr><th>参数名称</th><th>类型</th><th>描述</th></tr>
									<tr><td><strong>unlock</strong></td><td>Function</td><td>解锁，如：unlock(tag)</td></tr>
									<tr><td><strong>chk</strong></td><td>Function</td><td>检查</td></tr>
									<tr><td><strong>go2pre</strong></td><td>Function</td><td>跳到上一个</td></tr>
									<tr><td><strong>go2next</strong></td><td>Function</td><td>跳到下一个</td></tr>
									<tr><td><strong>go2play</strong></td><td>Function</td><td>跳播，如：go2play(idx)</td></tr>
								<tr><td colspan="3">&nbsp;</td></tr>
				<tr><td>返回值</td><td></td><td></td></tr>
			</table>
				<div class="example">
			<h3>示例 : </h3>
							<h5 xmlns="">CSS代码:</h5>
				<pre xmlns=""><code id="cssbox"></code></pre>
						
							<h5 xmlns="">HTML代码:</h5>
				<pre xmlns=""><code id="htmlbox"></code></pre>
									
				<h5 xmlns="">JS代码:</h5>
				<pre xmlns=""><code id="jsbox"></code></pre>
								</div>
		<div style="text-align:right">
			
					
				<button onclick="window.open('../codepages/51.html');">运行代码</button>
						
		</div><br/>	
		<div>
			<h3>同类参考 :</h3>
			<div>
							<span><a href='177.html'>F().anime</a></span>&#12288;|&#12288;							<span><a href='48.html'>F().drag</a></span>&#12288;|&#12288;							<span><a href='75.html'>F.dialog</a></span>&#12288;|&#12288;							<span><a href='74.html'>F.pagination</a></span>&#12288;|&#12288;							<span><a href='80.html'>F().tree</a></span>&#12288;|&#12288;							<span><a href='50.html'>F.menu</a></span>&#12288;|&#12288;							<span><a href='32.html'>F.datePicker</a></span>&#12288;|&#12288;							<span><a href='28.html'>F.colorPicker</a></span>&#12288;|&#12288;							<span><a href='82.html'>F.canvas</a></span>						</div>
		</div>
	</div>
</div><br />

<textarea id="css" style="display:none;">#tbox01 .tab { list-style-position:inside; list-style-type:none; margin:0px;padding:0px;}
#tbox01 .tab li { float:left; border:1px solid blue; background-color:#ffffff; cursor:pointer;}
#tbox01 .tab li.focus{background-color:#ff0000; cursor:default;}
#tbox01 .panel li{display:none;}
#status{background-color:#000; color:#fff; width:200px; height:30px; line-height:30px; text-indent:15px; marign-bottom:20px;}</textarea>
<textarea id="html" style="display:none;"><div id="status"></div>
<div id="tbox01">
	<ul class="tab">

		<li>上期</li>
		<li class="focus">本期</li>
		<li>下期</li>
	</ul>
	<ul class="panel">
		<li>双色球中奖</li>
		<li style="display:block;">足彩中奖</li>

		<li>北单中奖</li>
	</ul>
</div></textarea>
<textarea id="js" style="display:none;">F("tbox01").slides({
	etype: "mouseover",
	index: 1,
	onchange: function (me){
		F("status").html("你选择了"+me.tab.item(me.nowIndex).html()+",第"+(me.nowIndex+1)+"项");
	}
});</textarea>
<textarea id="result" style="display:none;"></textarea>


<script type="text/javascript">
var css = F('css').val();
var html = F('html').val();		
var js = F('js').val();
var result = F('result').val();
css && F('cssbox').highlight(css, "css");
html && F('htmlbox').highlight(html, "html");
js && F('jsbox').highlight(js, "js");
result && F('resultbox').highlight(result,"js");
</script>

</body>
</html>